import { FC, memo } from 'react';
import styles from './gpuTemp.module.less';

interface IGpuTempProps {
  temp: number;
  t1: number | undefined;
  t2: number | undefined;
  unit?: string;
}

const GpuTemp: FC<IGpuTempProps> = (props) => {
  const { temp, t1, t2, unit: _unit } = props;
  if (!t1 || !t2) {
    return <div className={styles.gpuTemp}>{temp}℃</div>;
  }
  if (!temp) {
    return null;
  }
  const unit = _unit || '℃';
  const bgColor = temp > t2 ? '#F9D7DD' : temp > t1 ? '#FCF3D9' : '';
  const textColor = temp > t2 ? '#E63757' : temp > t1 ? '#F6C448' : '';

  return (
    <div
      className={styles.gpuTemp}
      style={{ backgroundColor: bgColor, color: textColor }}
    >
      {temp}
      {unit}
    </div>
  );
};

export default memo(GpuTemp);
